<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Amber - Pet Care Bootstrap 5 Template</title>

    <!-- Favicons -->
    <link rel="shortcut icon" href="assets/images/favicon.ico">
    <link rel="stylesheet" href="assets/css/vendor/vendor.min.css">
    <link rel="stylesheet" href="assets/css/plugins/plugins.min.css">
    <link rel="stylesheet" href="assets/css/style.min.css">
    <link rel="stylesheet" href="assets/css/vendor/fontawesome.min.css" />
</head>

<body style="font-family: 'Britannic Bold'">
<div id="app">
    <!-- Header Section Start -->
    <div class="header section">

        <!-- Header Bottom Start -->
        <div class="header-bottom">
            <div class="header-sticky">
                <div class="container">
                    <div class="row align-items-center position-relative">

                        <!-- Header Logo Start -->
                        <div class="col-lg-3 col-md-4 col-6">
                            <div class="header-logo">
                                <a href="index.html"><img src="assets/images/logo/logo.png" alt="Site Logo" /></a>
                            </div>
                        </div>
                        <!-- Header Logo End -->

                        <!-- Header Menu Start -->
                        <div class="col-lg-6 d-none d-lg-block">
                            <div class="main-menu">
                                <ul>
                                    <li><a href="index.html">首页</a></li>
                                    <li><a href="shop.html">商品列表</a></li>
                                    <li><a href="cart.html">购物车</a></li>
                                    <li><a href="about.html">关于</a></li>
                                    <li><a href="../login.html">退出登录</a></li>
                                </ul>
                            </div>
                        </div>
                        <!-- Header Menu End -->

                        <!-- Header Action Start -->
                        <div class="col-lg-3 col-md-8 col-6">
                            <div class="header-actions">

                                <!-- Header Action Search Button Start -->
                                <div class="header-action-btn header-action-btn-search d-none d-md-flex">
                                    <div class="action-execute">
                                        <a class="action-search-open" href="javascript:void(0)"><i
                                                class="icon-magnifier icons"></i></a>
                                        <a class="action-search-close" href="javascript:void(0)"><i
                                                class="ti-close"></i></a>
                                    </div>
                                    <!-- Search Form and Button Start -->
                                    <form class="header-search-form" action="#">
                                        <input type="text" class="header-search-input"
                                               placeholder="Search Our Store">
                                        <button class="header-search-button"><i
                                                class="icon-magnifier icons"></i></button>
                                    </form>
                                    <!-- Search Form and Button End -->
                                </div>
                                <!-- Header Action Search Button End -->

                                <!-- Header My Account Button Start -->
                                <a href="my-account.html" class="header-action-btn header-action-btn-wishlist">
                                    <i class="icon-user icons"></i>
                                </a>
                                <!-- Header My Account Button End -->

                                <!-- Header Action Button Start -->
                                <div class="header-action-btn header-action-btn-cart d-none d-sm-flex">
                                    <a class="cart-visible" href="javascript:void(0)"
                                       @click="()=>{$('.header-cart-content').slideToggle('slow');}">
                                        <i class="icon-handbag icons"></i>
                                        <span class="header-action-num">{{cartNum}}</span>
                                    </a>

                                    <!-- Header Cart Content Start -->
                                    <div class="header-cart-content" id="carts">

                                        <!-- Cart Procut Wrapper Start  -->
                                        <div class="cart-product-wrapper">

                                            <!-- Cart Product/Price Start -->
                                            <div class="cart-product-inner p-b-20 m-b-20 border-bottom"
                                                 v-for="(item,index) in cartList" :key="index">

                                                <!-- Single Cart Product Start -->
                                                <div class="single-cart-product">
                                                    <div class="cart-product-thumb">
                                                        <a href="#"><img :src="item.images" alt="Cart Product"></a>
                                                    </div>
                                                    <div class="cart-product-content">
                                                        <h3 class="title"><a href="#">{{item.shopName}}</a></h3>
                                                        <div class="product-quty-price">
                                                                <span class="cart-quantity">数量: <strong> {{item.number}}
                                                                    </strong></span>
                                                            <span class="price">
                                                                    <span class="new">￥{{item.money}}</span>
                                                                </span>
                                                        </div>
                                                    </div>
                                                </div>
                                                <!-- Single Cart Product End -->

                                                <!-- Product Remove Start -->
                                                <div class="cart-product-remove">
                                                    <a href="#/" @click="delCart(item.id)"><i
                                                            class="icon-close"></i></a>
                                                </div>
                                                <!-- Product Remove End -->

                                            </div>
                                            <!-- Cart Product/Price End -->

                                        </div>
                                        <!-- Cart Procut Wrapper -->

                                        <!-- Cart Product Total Start -->
                                        <div class="cart-product-total p-b-20 m-b-20 border-bottom">
                                            <span class="value">总价</span>
                                            <span class="price">￥{{countMoney}}</span>
                                        </div>
                                        <!-- Cart Product Total End -->

                                        <!-- Cart Product Button Start -->
                                        <div class="cart-product-btn m-t-20">
                                            <a href="cart.html"
                                               class="btn btn-outline-light btn-hover-primary w-100">查看购物车</a>
                                            <a href="#" class="btn btn-outline-light btn-hover-primary w-100 m-t-20"
                                               @click="buyAll">全部下单</a>
                                        </div>
                                        <!-- Cart Product Button End -->

                                    </div>
                                    <!-- Header Cart Content End -->

                                </div>
                                <div class="header-action-btn header-action-btn-cart d-flex d-sm-none">
                                    <a href="#">
                                        <i class="icon-handbag icons"></i>
                                        <span class="header-action-num">3</span>
                                    </a>
                                </div>
                                <!-- Header Action Button End -->

                                <!-- Mobile Menu Hambarger Action Button Start -->
                                <a href="javascript:void(0)"
                                   class="header-action-btn header-action-btn-menu d-lg-none d-md-flex">
                                    <i class="icon-menu"></i>
                                </a>
                                <!-- Mobile Menu Hambarger Action Button End -->

                            </div>
                        </div>
                        <!-- Header Action End -->

                    </div>
                </div>
            </div>
        </div>
        <!-- Header Bottom End -->

    </div>
    <!-- Header Section End -->

    <!-- Breadcrumb Area Start -->
    <div class="section breadcrumb-area bg-name-bright">
        <div class="container">
            <div class="row">
                <div class="col-12 text-center">
                    <div class="breadcrumb-wrapper">
                        <h2 class="breadcrumb-title">我的账号</h2>
                        <ul>
                            <li><a href="index.html">首页</a></li>
                            <li>我的账号</li>
                        </ul>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <!-- Breadcrumb Area End -->

    <!-- My Account Section Start -->
    <div class="section section-margin">
        <div class="container">

            <div class="row">
                <div class="col-lg-12">

                    <!-- My Account Page Start -->
                    <div class="myaccount-page-wrapper">
                        <div class="row">

                            <!-- My Account Tab Menu Start -->
                            <div class="col-lg-3 col-md-4">
                                <div class="myaccount-tab-menu nav" role="tablist">
                                    <a href="#orders" class="active" data-bs-toggle="tab"><i
                                            class="fa fa-cart-arrow-down"></i> 我的订单</a>
                                    <a href="#address-edit" data-bs-toggle="tab"><i class="fa fa-map-marker"></i>
                                        账户充值</a>
                                    <a href="#account-info" data-bs-toggle="tab"><i class="fa fa-user"></i> 个人信息</a>
                                    <a href="../login.html"><i class="fa fa-sign-out"></i> 退出登录</a>
                                </div>
                            </div>
                            <!-- My Account Tab Menu End -->

                            <!-- My Account Tab Content Start -->
                            <div class="col-lg-9 col-md-8">
                                <div class="tab-content" id="myaccountContent">


                                    <!-- Single Tab Content Start -->
                                    <div class="tab-pane fade show active" id="orders" role="tabpanel">
                                        <div class="myaccount-content">
                                            <h3 class="title">订单列表</h3>
                                            <div class="myaccount-table table-responsive text-center">
                                                <table class="table table-bordered">
                                                    <thead class="thead-light">
                                                    <tr>
                                                        <th>订单编号</th>
                                                        <th>商品名称</th>
                                                        <th>下单时间</th>
                                                        <th>订单状态</th>
                                                        <th>付款价格</th>
                                                    </tr>
                                                    </thead>
                                                    <tbody>
                                                    <tr v-for="(item,index) in orderList" :key="index">
                                                        <td>{{item.id}}</td>
                                                        <td>{{item.shop_name}}</td>
                                                        <td>{{item.buyDate}}</td>
                                                        <td>{{item.shopState=='1'?'已下单':item.shopState=='2'?'已发货':'购物车'}}</td>
                                                        <td>{{item.money}}</td>
                                                    </tr>
                                                    </tbody>
                                                </table>
                                            </div>
                                        </div>
                                    </div>
                                    <!-- Single Tab Content End -->

                                    <!-- Single Tab Content Start -->
                                    <div class="tab-pane fade" id="address-edit" role="tabpanel">
                                        <div class="myaccount-content">
                                            <h3 class="title">我的账户</h3>
                                            <address>
                                                <p><strong>{{userName}}</strong></p>
                                                <p>余额：￥{{userMoney}}</p>
                                                <p>是否VIP：{{isVip==='0'?'否':'是'}}</p>
                                                <p v-if="isVip==='0'"><a href="#" style="color: #ffc107;" @click="upVIp">升级会员</a></p>
                                            </address>
                                            <a href="#" data-bs-toggle="modal" data-bs-target="#quick-view"
                                               class="btn btn btn-dark btn-hover-primary rounded-0"><i
                                                    class="fa fa-edit m-r-10"></i>充值</a>
                                        </div>
                                    </div>
                                    <!-- Single Tab Content End -->

                                    <!-- Single Tab Content Start -->
                                    <div class="tab-pane fade" id="account-info" role="tabpanel">
                                        <div class="myaccount-content">
                                            <h3 class="title">个人信息</h3>
                                            <div class="account-details-form">
                                                <form action="#">
                                                    <div class="row">
                                                        <div class="col-lg-6">
                                                            <div class="single-input-item m-b-15">
                                                                <label
                                                                       class="required m-b-10">用户名</label>
                                                                <input type="text" v-model="userName"
                                                                       placeholder="请输入" readonly/>
                                                            </div>
                                                        </div>
                                                        <div class="col-lg-6">
                                                            <div class="single-input-item m-b-15">
                                                                <label class="required m-b-10">密码</label>
                                                                <input type="text" v-model="passwd"
                                                                       placeholder="请输入" />
                                                            </div>
                                                        </div>
                                                    </div>
                                                    <div class="row">
                                                        <div class="col-lg-6">
                                                            <div class="single-input-item m-b-15">
                                                                <label
                                                                        class="required m-b-10">姓名</label>
                                                                <input type="text" v-model="name"
                                                                       placeholder="请输入"/>
                                                            </div>
                                                        </div>
                                                        <div class="col-lg-6">
                                                            <div class="single-input-item m-b-15">
                                                                <label class="required m-b-10">手机号</label>
                                                                <input type="text" v-model="phone"
                                                                       placeholder="请输入" />
                                                            </div>
                                                        </div>
                                                    </div>
                                                    <div class="row">
                                                        <div class="col-lg-6">
                                                            <div class="single-input-item m-b-15">
                                                                <label
                                                                       class="required m-b-10">地址</label>
                                                                <input type="text" v-model="address"
                                                                       placeholder="请输入"/>
                                                            </div>
                                                        </div>
                                                        <div class="col-lg-6">
                                                            <div class="single-input-item m-b-15">
                                                                <label class="required m-b-10">余额</label>
                                                                <input type="text" v-model="userMoney"
                                                                       placeholder="请输入" readonly/>
                                                            </div>
                                                        </div>
                                                    </div>
                                                    <div class="single-input-item single-item-button m-t-30">
                                                        <button
                                                                class="btn btn btn-primary btn-hover-dark rounded-0" @click="updateUserInfo">修改</button>
                                                    </div>
                                                </form>
                                            </div>
                                        </div>
                                    </div> <!-- Single Tab Content End -->

                                </div>
                            </div>
                            <!-- My Account Tab Content End -->

                        </div>
                    </div>
                    <!-- My Account Page End -->

                </div>
            </div>

        </div>
    </div>
    <!-- My Account Section End -->

    <!-- Footer Section Start -->
    <footer class="section footer-section">
        <!-- Footer Top Start -->
        <div class="footer-top bg-name-bright section-padding">
            <div class="container">
            </div>
        </div>
        <!-- Footer Top End -->

        <!-- Footer Bottom Start -->
        <div class="footer-bottom bg-name-light p-t-20 p-b-20">
            <div class="container">
                <div class="row align-items-center m-b-n20">
                    <div class="col-md-6 text-center text-md-start order-2 order-md-1 m-b-20">
                        <div class="copyright-content">
                            <p class="mb-0">Copyright &copy; 2022.XXX.<a target="_blank"
                                                                         href="https://sc.chinaz.com/moban/">&#x7F51;&#x9875;&#x6A21;&#x677F;</a></p>
                        </div>
                    </div>
                    <div class="col-md-6 text-center text-md-end order-1 order-md-2 m-b-20">
                        <div class="payment">
                            <a href="#/">
                                <img class="fit-image" src="assets/images/payment/payment_large.png" alt="Payment">
                            </a>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <!-- Footer Bottom End -->
    </footer>
    <!-- Footer Section End -->

    <!-- Modal Start  -->
    <div class="modalquickview modal fade" style="width: 400px;margin-left: 1200px;" id="quick-view" tabindex="-1" aria-labelledby="quick-view" role="dialog"
         aria-hidden="true">
        <div class="modal-dialog modal-dialog-centered">
            <div class="modal-content">
                <button class="btn close" data-bs-dismiss="modal">×</button>
                <div class="card-body">
                    <h4 class="card-title">账户充值</h4>
                    <form class="forms-sample">
                        <div class="form-group">
                            <label>充值金额</label>
                            <input type="text" v-model="inMoneys" class="form-control" style="margin-top: 10px;" placeholder="请输入">
                        </div>
                    </form>
                </div>

                <div class="add-to_cart">
                    <a class="btn btn-primary btn-hover-dark rounded-0"  data-bs-dismiss="modal" href="#" style="margin-left: 80px;"
                       @click="inMoney">确认充值</a>
                </div>
            </div>
        </div>
    </div>
    <!-- Modal End  -->


</div>
<!-- Global Vendor, plugins JS -->
<script src="assets/js/vendor.min.js"></script>
<script src="assets/js/plugins.min.js"></script>

<!--Main JS-->
<script src="assets/js/main.js"></script>
<script src="assets/js/vue.min.js"></script>
<script>
    new Vue({
        el: '#app',
        data: function () {
            return {
                page: 1,
                size:9999999,
                userId: '',
                userName: '',
                userMoney: '',
                passwd: '',
                phone: '',
                name: '',
                isVip: '',
                role: '',
                address:'',
                cartList: [],
                orderList: [],
                shopName: '',
                cartNum: 0,
                countMoney: 0,
                inMoneys: 0,
            }
        },
        mounted() {
            var userInfo = JSON.parse(sessionStorage.getItem('userInfo'));
            if (userInfo == "" || userInfo == null) {
                alert("您还没有登录，请先登录后在进行操作！");
                window.location.href = '../login.html'
            };
            this.role = userInfo.role
            this.userId = userInfo.id
            this.getUserInfo()
            this.getCartList()
            this.getOrderList()
        },
        methods: {
            getUserInfo(){
                const that = this
                $.ajax({
                    //几个参数需要注意一下
                    type: "POST", //方法类型
                    dataType: "json", //预期服务器返回的数据类型
                    contentType: 'application/json',
                    url: "/userInfo/queryById",
                    data: JSON.stringify({
                        id: that.userId
                    }),
                    success: function (data) {
                        that.isVip = data.vip
                        that.userMoney = data.money
                        that.userName = data.account
                        that.address = data.address
                        that.passwd = data.passwd
                        that.name = data.userName
                        that.phone = data.iphone
                    },
                    error: function () {
                        alert("异常！");
                    }
                });
            },
            getCartList() {
                const that = this
                that.countMoney = 0
                $.ajax({
                    //几个参数需要注意一下
                    type: "POST", //方法类型
                    dataType: "json", //预期服务器返回的数据类型
                    url: "/orderList/list",
                    contentType: 'application/json',
                    data: JSON.stringify({
                        "size": that.size,
                        "page": that.page,
                        "shopState": '0',
                        "bugId": that.userId
                    }),
                    success: function (data) {
                        data.data.list.forEach((item) => {
                            that.countMoney += item.money
                        })
                        that.cartList = data.data.list
                        that.cartNum = data.data.total
                    },
                    error: function () {
                        alert("异常！");
                    }
                });
            },
            getOrderList() {
                const that = this
                that.countMoney = 0
                $.ajax({
                    //几个参数需要注意一下
                    type: "POST", //方法类型
                    dataType: "json", //预期服务器返回的数据类型
                    url: "/orderList/list",
                    contentType: 'application/json',
                    data: JSON.stringify({
                        "size": that.size,
                        "page": that.page,
                        "bugId": that.userId
                    }),
                    success: function (data) {
                        data.data.list.forEach((item) => {
                            item.buyDate = that.getDate(item.buyDate)
                        })
                        that.orderList = data.data.list
                    },
                    error: function () {
                        alert("异常！");
                    }
                });
            },
            buyAll() {
                const that = this
                if (confirm("确定要全部下单吗?")) {
                    that.cartList.forEach((item) => {
                        $.ajax({
                            //几个参数需要注意一下
                            type: "POST", //方法类型
                            dataType: "json", //预期服务器返回的数据类型
                            contentType: 'application/json',
                            url: "/orderList/edit",
                            data: JSON.stringify({
                                id: item.id,
                                shopState: '1'
                            }),
                            success: function (data) {
                                that.getCartList()
                            },
                            error: function () {
                                alert("异常！");
                            }
                        });
                    })
                }
            },
            delCart(id) {
                const that = this
                $.ajax({
                    //几个参数需要注意一下
                    type: "POST", //方法类型
                    dataType: "json", //预期服务器返回的数据类型
                    contentType: 'application/json',
                    url: "/orderList/deleteById",
                    data: JSON.stringify({
                        id: id
                    }),
                    success: function (data) {
                        that.getCartList()
                    },
                    error: function () {
                        alert("异常！");
                    }
                });
            },
            inMoney() {
                const that = this
                $.ajax({
                    //几个参数需要注意一下
                    type: "POST", //方法类型
                    dataType: "json", //预期服务器返回的数据类型
                    contentType: 'application/json',
                    url: "/userInfo/edit",
                    data: JSON.stringify({
                        id: that.userId,
                        money: parseInt(that.userMoney) + parseInt(that.inMoneys),
                    }),
                    success: function (data) {
                        alert("充值成功")
                        that.userMoney = data.money
                    },
                    error: function () {
                        alert("异常！");
                    }
                });
            },
            updateUserInfo(){
                const that = this
                $.ajax({
                    //几个参数需要注意一下
                    type: "POST", //方法类型
                    dataType: "json", //预期服务器返回的数据类型
                    contentType: 'application/json',
                    url: "/userInfo/edit",
                    data: JSON.stringify({
                        id:that.userId,
                        address: that.address,
                        money: that.userMoney,
                        userName: that.name,
                        iphone: that.phone,
                        passwd: that.passwd
                    }),
                    success: function (data) {
                        alert("修改成功")
                        that.getUserInfo()
                    },
                    error: function () {
                        alert("异常！");
                    }
                });
            },
            upVIp(){
                const that = this
                if (confirm("确定要升级为会员吗，升级会员需要￥50")) {
                    $.ajax({
                        //几个参数需要注意一下
                        type: "POST", //方法类型
                        dataType: "json", //预期服务器返回的数据类型
                        contentType: 'application/json',
                        url: "/userInfo/edit",
                        data: JSON.stringify({
                            id: that.userId,
                            money: parseInt(that.userMoney) - 50,
                            vip: '1',
                        }),
                        success: function (data) {
                            alert("升级成功")
                            that.userMoney = data.money
                            that.isVip = data.vip
                        },
                        error: function () {
                            alert("异常！");
                        }
                    });
                }
            },
            getDate(date) {
                var date = new Date(date);
                this.year = date.getFullYear();
                this.month = date.getMonth() + 1;
                this.date = date.getDate();
                this.hour = date.getHours() < 10 ? "0" + date.getHours() : date.getHours();
                this.minute = date.getMinutes() < 10 ? "0" + date.getMinutes() : date.getMinutes();
                this.second = date.getSeconds() < 10 ? "0" + date.getSeconds() : date.getSeconds();
                var currentTime = this.year + '-' + this.month + '-' + this.date + ' ' + this.hour + ':' + this.minute + ':' + this.second;
                return currentTime;
            }
        }
    })
</script>
</body>

</html>
